<template>
  <el-table
    :data="list"
    max-height="800"
    style="width: 1300px"
    border
    stripe
  >
    <el-table-column
      label="账号"
      prop="name"
      width="80"
      fixed
    />

    <el-table-column
      label="ID"
      prop="ID"
      width="100"
    />

    <el-table-column
      label="邮箱"
      prop="email"
      width="200"
    />

    <el-table-column
      label="注册时间"
      prop="CreatedAt"
      width="250"
    />

    <el-table-column
      label="用户头像"
      width="180"
    >
      <template slot-scope="scope">
        <el-tag :type="scope.row.avatar ? 'success' : 'info'">
          <a v-if="scope.row.avatar" :href="'http://114.132.236.147/gxa' + scope.row.avatar" target="_blank">
            点击查看用户头像
          </a>
          <span v-else>用户当前没有设置头像</span>
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      align="right"
      min-width="300"
    >
      <template slot="header" slot-scope="scope">
        <div>
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            placeholder="输入关键字搜索"
            style="width: 300px;"
          >
            <el-button
              slot="append"
              type="primary"
              icon="el-icon-circle-close"
              @click="search = ''"
            />
          </el-input>
        </div>
        <!-- 由于使用了ESlint，没有使用scope 导致报错，下面的div只为了不让这个错误报错 -->
        <div v-if="false">{{ scope }}</div>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="info"
          @click="modifyEmailClick(scope.$index, scope.row)"
        >修改邮箱</el-button>
        <el-button
          size="mini"
          type="warning"
          @click="modifyInfoClick(scope.$index, scope.row)"
        >修改密码</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="deleteUserClick(scope.$index, scope.row)"
        >删除用户</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  components: {

  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      search: '' // 过滤器的值
    }
  },
  watch: {
    search(o, _l) {
      this.$emit('search', o) // 过滤器
    }
  },
  methods: {
    modifyInfoClick(_index, row) {
      this.$emit('modifyInfoClick', row) // 修改密码
    },
    deleteUserClick(_index, row) {
      this.$emit('deleteUserClick', row) // 删除用户
    },
    modifyEmailClick(_index, row) {
      this.$emit('modifyEmailClick', row) // 修改邮箱
    }
  }
}
</script>

<style scoped>

</style>
